import { cn } from "@/common/cn";

const TYPE = {
  outline: "badge-outline",
  dash: "badge-dash",
  soft: "badge-soft",
  ghost: "badge-ghost",
};

const STATUS = {
  neutral: "badge-neutral",
  primary: "badge-primary",
  secondary: "badge-secondary",
  accent: "badge-accent",
  info: "badge-info",
  success: "badge-success",
  warning: "badge-warning",
  error: "badge-error",
};

const SIZE = {
  xs: "badge-xs",
  sm: "badge-sm",
  md: "badge-md",
  lg: "badge-lg",
  xl: "badge-xl",
};

export type BadgeStatus = keyof typeof STATUS;
export type BadgeType = keyof typeof TYPE;

export type BadgeProps = Omit<
  React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
  "size" | "status"
> & {
  size?: Size | undefined;
  status?: BadgeStatus | undefined;
  type?: BadgeType | undefined;
};

export default function Badge({ size, status, type, children, className }: BadgeProps) {
  return (
    <span
      className={cn(
        "badge",
        size && SIZE[size],
        status && STATUS[status],
        type && TYPE[type],
        className,
      )}
    >
      {children}
    </span>
  );
}
